<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/main.css" type="text/css" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body {
				background-color: #F5F5F5;
			}
		</style>
	</head>
	<body>

		<div class="nav">
			<ul>
				<li class="logo">我的博客</li>
				<li class="active"><a href="index.html">首页</a></li>
				<li><a href="list.html">文章</a></li>
				<li><a href="about.html">关于</a></li>
				<li><a href="contact.html">联系</a></li>
			</ul>
		</div>
		<div class="content">
			<div class="left">
				<div class="banner">
					<img class="z" src="img/z.png" />
					<img class="bg" src="img/b1.jpg" />
					<img class="r" src="img/r.png" />
				</div>
				<div class="left-conetnt">
					<img src="img/list1.jpg" />
					<a href="details.html">
					<div class="left-con">
						<h2>测试主题</h2>
						<p class="con1">测试内容</p>
						<p class="con2">2021年12月12日 / 11 阅读 / 0 评论 / 0 点赞 <span>默认分类</span></p>
					</div>
					</a>
				</div>
				<div class="left-conetnt">
					<img src="img/list1.jpg" />
					<a href="details.html">
					<div class="left-con">
						<h2>测试主题</h2>
						<p class="con1">测试内容</p>
						<p class="con2">2021年12月12日 / 11 阅读 / 0 评论 / 0 点赞 <span>默认分类</span></p>
					</div>
					</a>
				</div>
				<div class="left-conetnt">
					<img src="img/list1.jpg" />
					<a href="details.html">
					<div class="left-con">
						<h2>测试主题</h2>
						<p class="con1">测试内容</p>
						<p class="con2">2021年12月12日 / 11 阅读 / 0 评论 / 0 点赞 <span>默认分类</span></p>
					</div>
					</a>
				</div>
			</div>
			<div class="right">
				<div class="right-search">
					<input type="text" placeholder="请输入关键字..."/>
				</div>
				
				<div class="right-con1">
					<h3>最新文章</h3>
					<ul>
						<li><a href="#">这是一个最新测试1</a></li>
						<li><a href="#">这是一个最新测试2</a></li>
						<li><a href="#">这是一个最新测试3</a></li>
						<li><a href="#">这是一个最新测试4</a></li>
						<li><a href="#">这是一个最新测试5</a></li>
						<li><a href="#">这是一个最新测试6</a></li>
						<li><a href="#">这是一个最新测试7</a></li>
					</ul>
				</div>
				
				<div class="right-con2">
					<h3>最近评论</h3>
					<ul>
						<li>
							<img src="https://img2.baidu.com/it/u=2761317825,1023537553&fm=26&fmt=auto" />
							<span>这是一个评论！</span>
						</li>
						<li>
							<img src="https://img2.baidu.com/it/u=2761317825,1023537553&fm=26&fmt=auto" />
							<span>这是一个评论！</span>
						</li>
						<li>
							<img src="https://img2.baidu.com/it/u=2761317825,1023537553&fm=26&fmt=auto" />
							<span>这是一个评论！</span>
						</li>
						<li>
							<img src="https://img2.baidu.com/it/u=2761317825,1023537553&fm=26&fmt=auto" />
							<span>这是一个评论！</span>
						</li>
					</ul>
				</div>
				
				
			</div>
		</div>
		<div class="footer">
			<p> 2021 - 2021 © Reach - <a href="#" target="_blank" rel="noopener noreferrer" one-link-mark="yes">个人博客</a></p>
		</div>
		<script src="js/main.js"></script>
	</body>
</html>
